<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级计时器</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .timer-glow {
                box-shadow: 0 0 25px rgba(59, 130, 246, 0.5);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:scale-105 active:scale-95;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-dark to-slate-800 min-h-screen flex flex-col items-center justify-center p-4 text-light font-sans">
    <div class="max-w-md w-full mx-auto">
        <!-- 标题 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary text-shadow">
                高级计时器
            </h1>
            <p class="text-slate-400 mt-2">精确计时，掌控每一刻</p>
        </div>
        
        <!-- 计时器显示 -->
        <div class="bg-slate-900/50 backdrop-blur-md rounded-2xl p-8 mb-8 border border-slate-700/50 timer-glow">
            <div id="timer-display" class="text-[clamp(2.5rem,8vw,4rem)] font-mono text-center font-bold tracking-tighter">
                00:00:00.000
            </div>
        </div>
        
        <!-- 控制按钮 -->
        <div class="flex justify-center gap-4 md:gap-6 mb-8">
            <button id="start-btn" class="bg-secondary hover:bg-secondary/80 text-white rounded-full p-4 md:p-5 shadow-lg btn-hover">
                <i class="fa fa-play text-xl md:text-2xl"></i>
            </button>
            <button id="pause-btn" class="bg-primary hover:bg-primary/80 text-white rounded-full p-4 md:p-5 shadow-lg btn-hover hidden">
                <i class="fa fa-pause text-xl md:text-2xl"></i>
            </button>
            <button id="reset-btn" class="bg-danger hover:bg-danger/80 text-white rounded-full p-4 md:p-5 shadow-lg btn-hover">
                <i class="fa fa-refresh text-xl md:text-2xl"></i>
            </button>
        </div>
        
        <!-- 计时记录 -->
        <div class="bg-slate-900/30 backdrop-blur-sm rounded-xl p-4 border border-slate-700/30">
            <h2 class="text-center text-slate-300 mb-3 flex items-center">
                <i class="fa fa-history mr-2"></i>计时记录
            </h2>
            <div id="laps-container" class="max-h-40 overflow-y-auto text-slate-300 text-sm space-y-2">
                <p class="text-center text-slate-500 italic">暂无记录</p>
            </div>
        </div>
        
        <!-- 额外功能按钮 -->
        <div class="flex justify-center mt-6">
            <button id="lap-btn" class="bg-slate-700 hover:bg-slate-600 text-white rounded-lg px-4 py-2 shadow btn-hover">
                <i class="fa fa-flag mr-1"></i> 记录时间点
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="mt-auto text-slate-500 text-sm p-4">
        使用 requestAnimationFrame 实现高精度计时
    </footer>

    <script>
        class RAFTimer {
            constructor() {
                this.startTime = null;
                this.elapsedTime = 0;
                this.isRunning = false;
                this.animationFrameId = null;
                this.lastTime = 0;
                this.callbacks = [];
                this.laps = [];
            }

            update(currentTime) {
                if (!this.startTime) {
                    this.startTime = currentTime;
                    this.lastTime = currentTime;
                }

                const deltaTime = currentTime - this.lastTime;
                this.lastTime = currentTime;
                this.elapsedTime += deltaTime;

                this.callbacks.forEach(callback => {
                    callback(this.elapsedTime);
                });

                if (this.isRunning) {
                    this.animationFrameId = requestAnimationFrame(time => this.update(time));
                }
            }

            start() {
                if (!this.isRunning) {
                    this.isRunning = true;
                    this.animationFrameId = requestAnimationFrame(time => this.update(time));
                }
            }

            pause() {
                this.isRunning = false;
                if (this.animationFrameId) {
                    cancelAnimationFrame(this.animationFrameId);
                    this.animationFrameId = null;
                }
            }

            reset() {
                this.pause();
                this.startTime = null;
                this.elapsedTime = 0;
                this.lastTime = 0;
                this.laps = [];
                
                this.callbacks.forEach(callback => {
                    callback(0);
                });
                
                return this.laps;
            }

            recordLap() {
                if (this.elapsedTime > 0) {
                    const lapTime = this.elapsedTime;
                    this.laps.push(lapTime);
                    return {
                        lapNumber: this.laps.length,
                        time: lapTime,
                        formattedTime: this.formatTime(lapTime)
                    };
                }
                return null;
            }

            onUpdate(callback) {
                if (typeof callback === 'function') {
                    this.callbacks.push(callback);
                }
            }

            formatTime(timeInMs) {
                const hours = Math.floor(timeInMs / 3600000);
                const minutes = Math.floor((timeInMs % 3600000) / 60000);
                const seconds = Math.floor((timeInMs % 60000) / 1000);
                const milliseconds = Math.floor(timeInMs % 1000);
                
                return `${hours.toString().padStart(2, '0')}:${
                    minutes.toString().padStart(2, '0')
                }:${seconds.toString().padStart(2, '0')}.${
                    milliseconds.toString().padStart(3, '0')
                }`;
            }
        }

        // 初始化计时器
        const timer = new RAFTimer();
        const timerDisplay = document.getElementById('timer-display');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const resetBtn = document.getElementById('reset-btn');
        const lapBtn = document.getElementById('lap-btn');
        const lapsContainer = document.getElementById('laps-container');

        // 更新显示
        timer.onUpdate(time => {
            timerDisplay.textContent = timer.formatTime(time);
        });

        // 事件监听
        startBtn.addEventListener('click', () => {
            timer.start();
            startBtn.classList.add('hidden');
            pauseBtn.classList.remove('hidden');
            
            // 添加动画效果
            timerDisplay.classList.add('scale-105', 'text-primary');
            setTimeout(() => {
                timerDisplay.classList.remove('scale-105');
            }, 300);
        });

        pauseBtn.addEventListener('click', () => {
            timer.pause();
            pauseBtn.classList.add('hidden');
            startBtn.classList.remove('hidden');
            
            // 添加动画效果
            timerDisplay.classList.add('scale-105', 'text-slate-400');
            setTimeout(() => {
                timerDisplay.classList.remove('scale-105');
            }, 300);
        });

        resetBtn.addEventListener('click', () => {
            const previousLaps = timer.reset();
            pauseBtn.classList.add('hidden');
            startBtn.classList.remove('hidden');
            lapsContainer.innerHTML = '<p class="text-center text-slate-500 italic">暂无记录</p>';
            
            // 添加动画效果
            timerDisplay.classList.add('scale-105', 'text-danger');
            setTimeout(() => {
                timerDisplay.classList.remove('scale-105', 'text-danger');
                timerDisplay.classList.add('text-light');
            }, 300);
        });

        lapBtn.addEventListener('click', () => {
            if (timer.isRunning) {
                const lap = timer.recordLap();
                if (lap) {
                    // 清空"暂无记录"提示
                    if (lapsContainer.querySelector('p.italic')) {
                        lapsContainer.innerHTML = '';
                    }
                    
                    // 创建新的记录项
                    const lapElement = document.createElement('div');
                    lapElement.className = 'flex justify-between items-center p-2 border-b border-slate-700/50 last:border-0 animate-fadeIn';
                    lapElement.innerHTML = `
                        <span class="text-slate-400">#${lap.lapNumber}</span>
                        <span class="font-mono">${lap.formattedTime}</span>
                    `;
                    
                    // 添加到容器
                    lapsContainer.prepend(lapElement);
                    
                    // 添加动画效果
                    lapElement.classList.add('scale-105');
                    setTimeout(() => {
                        lapElement.classList.remove('scale-105');
                    }, 200);
                }
            }
        });

        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .animate-fadeIn {
                animation: fadeIn 0.3s ease-out forwards;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>
